{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="bi bi-person-circle me-2"></i>个人资料
            </h2>
            <a href="javascript:history.back()" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>返回
            </a>
        </div>

        <!-- 用户信息卡片 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>基本信息
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label"><strong>用户名</strong></label>
                            <div class="form-control-plaintext">{{ user.username }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>邮箱地址</strong></label>
                            <div class="form-control-plaintext">{{ user.email }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>用户角色</strong></label>
                            <div class="form-control-plaintext">
                                {% if user.role == 'admin' %}
                                    <span class="badge bg-danger">管理员</span>
                                {% else %}
                                    <span class="badge bg-primary">学生</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        {% if user.real_name %}
                        <div class="mb-3">
                            <label class="form-label"><strong>真实姓名</strong></label>
                            <div class="form-control-plaintext">{{ user.real_name }}</div>
                        </div>
                        {% endif %}
                        
                        {% if user.class_id is not none %}
                        <div class="mb-3">
                            <label class="form-label"><strong>班级</strong></label>
                            <div class="form-control-plaintext">{{ user.class_id }}班</div>
                        </div>
                        {% endif %}
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>注册时间</strong></label>
                            <div class="form-control-plaintext">
                                {{ user.created_at.strftime('%Y年%m月%d日 %H:%M') }}
                            </div>
                        </div>
                        
                        {% if user.last_login %}
                        <div class="mb-3">
                            <label class="form-label"><strong>最后登录</strong></label>
                            <div class="form-control-plaintext">
                                {{ user.last_login.strftime('%Y年%m月%d日 %H:%M') }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 邮箱统计 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-bar-chart me-2"></i>邮箱统计
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-4">
                        <div class="stats-card">
                            <div class="stats-number text-primary">{{ user.get_inbox_count() }}</div>
                            <div class="stats-label">收件箱邮件</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="stats-card">
                            <div class="stats-number text-success">{{ user.get_sent_count() }}</div>
                            <div class="stats-label">已发送邮件</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="stats-card">
                            <div class="stats-number text-warning">{{ user.get_unread_count() }}</div>
                            <div class="stats-label">未读邮件</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改密码 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>安全设置
                </h5>
            </div>
            <div class="card-body">
                <form id="changePasswordForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="currentPassword" class="form-label">当前密码</label>
                                <input type="password" class="form-control" id="currentPassword" 
                                       name="current_password" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newPassword" class="form-label">新密码</label>
                                <input type="password" class="form-control" id="newPassword" 
                                       name="new_password" required minlength="6">
                                <div class="form-text">密码长度至少6位</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="confirmPassword" class="form-label">确认新密码</label>
                                <input type="password" class="form-control" id="confirmPassword" 
                                       name="confirm_password" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check me-1"></i>修改密码
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const changePasswordForm = document.getElementById('changePasswordForm');
    
    changePasswordForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            current_password: formData.get('current_password'),
            new_password: formData.get('new_password'),
            confirm_password: formData.get('confirm_password')
        };
        
        // 验证新密码和确认密码是否一致
        if (data.new_password !== data.confirm_password) {
            showAlert('新密码和确认密码不一致', 'danger');
            return;
        }
        
        // 验证密码长度
        if (data.new_password.length < 6) {
            showAlert('新密码长度至少6位', 'danger');
            return;
        }
        
        try {
            const response = await apiRequest('/auth/change_password', {
                method: 'POST',
                body: JSON.stringify(data)
            });
            
            if (response.success) {
                showAlert(response.message, 'success');
                this.reset();
            }
        } catch (error) {
            showAlert(error.message, 'danger');
        }
    });
});
</script>
{% endblock %}